<? if ($c = stack('name')) {

	$d = component_data($c); 
	$s = component_settings($c);

startScript('jquery.fancybox.pack'); ?><script type="text/javascript">jQuery(function($) {<?

	 switch($s['nav']) {
		 
		 case 0: // scrollable

?>	$("#cpn-<?=$c?> .scrollable").scrollable({
		mousewheel:true
		<?=$s['circular'] ? ', circular:true' : ''?>
	})<?=$s['navigator'] ? '.navigator()' : ''?><?=$s['autoscroll'] ? '.autoscroll(7000)' : ''?>;
<?
			break;
			
		case 1: // parallax
		
			addScript('jquery.event.frame');
			addScript('jquery.jparallax');
	
			?>$("#cpn-<?=$c?> .scrollable .items").parallax({mouseport:$("#cpn-<?=$c?> .scrollable")});<?
			
			break;
			
		case 2: // scrollable + fancybox

			addScriptLink('jquery.fancybox.pack');
			
			$fparam = array();
			
			if ($s['show_title'] || $s['show_descr']) {
				$fparam['titlePosition'] = "'over'";
				
				ob_start();
				
?>function(title, arr, ind, opts) {
	var i = $(arr[ind]).find("img");
	var title = ~~<?=$s['show_title']?> && i.attr("title"), descr = ~~<?=$s['show_descr']?> && i.attr("alt");
	return (title || descr) ? '<hgroup><? 
		if ($s['show_title']) { ?><h3 class="title">' + i.attr("title") + '</h3><? }
		if ($s['show_descr']) { ?><section class="descr">' + i.attr("alt") + '</section><? }
	?></hgroup>' : '';
}<?				
				$fparam['titleFormat'] = ob_get_clean();
			}
			
			if (sizeof($fparam)) {
				foreach($fparam as $k => $v) $fparam[$k] = "$k: $v";
				$fparam = '{'.implode(', ', $fparam).'}';
			} else 
				$fparam = '';

?>	$("#cpn-<?=$c?> .scrollable").scrollable({
		mousewheel:true
		<?=$s['circular'] ? ', circular:true' : ''?>
	})<?=$s['navigator'] ? '.navigator()' : ''?><?=$s['autoscroll'] ? '.autoscroll(7000)' : ''?>;
	
	$("#cpn-<?=$c?> .items .block a").fancybox(<?=$fparam?>);
<?

			break;
	 }
			
	if ($s['show_tn']) { ?>
	
		$("#cpn-<?=$c?> .scrollable .items img").click(function() {
			var self = $(this); url = self.attr("data-url"); h = self.attr("data-h"), title = self.attr("title"), descr = self.attr("alt");
			var wrap = $("#cpn-<?=$c?> .image-wrap").fadeTo(100, 0.5);
			var sign = $("#cpn-<?=$c?> .sign");
	
			var img = new Image();
			img.onload = function() {
				wrap.fadeTo(100, 1);
				wrap.find("img").attr("src", url).attr("height", h);
				sign.find(".title").text(title);
				sign.find(".descr").html(descr);
			};
			img.src = url;
			
			return false;
		}).filter(":first").click();
	
	<? } ?>
	
});</script><? endScript();

	?><section id="cpn-<?=$c?>" class="cpn-album-gallery"><?

	if ($s['caption']) { ?><hgroup class="cpn-album-caption"><?=$s['caption']?></hgroup><? }
	
	?><div id="cpn-<?=$c?>-content" class="cpn-album-gallery-content"><?

		?><h2 class="cpn-album-gallery-title"><?=$s['gallery-title']?></h2><?
		?><div class="cpn-album-gallery-back"><a href="<?=_transformURL($CURRENT->url, array('remove_param' => $s['gparam']))?>" title="<?=htc('All galleries')?>"><?=tc('All galleries')?></a></div><?
		?><div class="clearer"></div><?

	if (sizeof($d)) {

		?><div class="navi-above"></div><?

		?><a class="prev browse left"></a><div class="scrollable"><div class="items"><?

		if ($s['gtpb']) { $t = 0; ?><div class="block"><? }
	
		foreach($d as $im => $info) {
			
			 if ($s['gtpb'] && (++$t > $s['gtpb'])) { $t = 0; ?><div class="clearer"></div></div><div class="block"><? }
			 
			?><div class="container"><div class="wrapper"><?

				if ($s['nav'] == 2) { ?><a href="<?="$s[path]/$im"?>" rel="gallery"><? }
				
			 	?><img src="<?="$s[path]/$info[tn]"?>" data-url="<?="$s[path]/$im"?>" data-h="<?=$info['h']?>" title="<?=h($info['title'])?>" alt="<?=h($info['descr'])?>"/><?

				if ($s['nav'] == 2) { ?></a><? }
			?></div></div><?
		} 

		if ($s['gtpb']) { ?><div class="clearer"></div></div><? }
	
		?></div></div><a class="next browse right"></a><?
		
		?><div class="navi navi-below"></div><?

		?><div class="clearer"></div><?


		if ($s['show_tn']) {
		
			?><div class="image-wrap"><div class="wrapper">
				<img src="/img/blank.gif" height="<?=$s['h']?>" />
			</div></div>
			
			<div class="sign">
				<h3 class="title"></h3>
				<div class="descr"></div>
			</div>
			<?
			
		}
	}
	
	?></div><?
	
	?></section><?
	
 
	unstack();
} ?>